<template>
  <div>
    <h4 class="font-weight-bold">
      <span class="text-muted font-weight-light">工具执行结果 /</span> 预警结果
    </h4>

    <b-card class="mb-4">
        <!-- <sky-table :data="table.data" :columns="table.columns" :show-index="table.showIndex"></sky-table> -->
        <Table :data="table.data" :columns="table.columns" :loading="table.loading" stripe border class="mt-2"></Table>
        <Page show-elevator show-total size="small" class="mt-2" :total="table.total" :current="table.currentPage"
                @on-change="(pageNum) => {
                    let self = this;
                    table.pageChange.call(self,pageNum);
                }"></Page>
    </b-card>
  </div>
</template>

<script>
export default {
    name: "tables-vue-tables-2",
    metaInfo: {
        title: "Vue Tables 2 - Tables"
    },
    components: {},
    data() {
        return {
            table: {
                showIndex: false,
                data: [],
                columns: [
                    {
                        title: "预警项",
                        key: "name"
                    },
                    {
                        title: "预警时间",
                        key: "createTime"
                    },
                    {
                        title: "状态",
                        key: "status"
                    },
                    {
                        title: "操作",
                        width: 160,
                        align: "center",
                        render: (h, params) => {
                            let vm = this;
                            return (
                                <div>
                                    <i-button
                                        type="info"
                                        size="small"
                                        class="mr-2"
                                        onClick={() => {
                                            return vm.edit(params);
                                        }}
                                    >
                                        确认
                                    </i-button>
                                </div>
                            );
                        }
                    }
                ],
                // 是否载入中
                loading: false,
                // 总页数
                total: 0,
                // 当前页数
                currentPage : 1,
                // 每页条目数
                pageSize : 10,
                // 分页切换
                pageChange: function(pageNum){
                    let self = this;
                    self.table.currentPage = pageNum;
                    self.loadTable().then(function(res){
                        if(res.data){
                            self.table.data = res.data.data ? res.data.data : [];
                        }
                    });
                }
            }
        };
    },
    mounted(){
        let self = this;
        //加载客户列表
        self.loadTable().then(function(res){
            // console.log(res);
            self.table.data = res ? res : [];
        });
    },
    methods: {
        loadTable(){
            let self = this;
            self.table.loading = true;

            return new Promise(function(resolve,reject){
                const req = new XMLHttpRequest();
                req.open("GET", "/static/json/finalResult/tool-alertRule-data.json");

                req.onload = () => {
                    const data = JSON.parse(req.response);
                     self.table.loading = false;
                    // this.table.data = data;
                    resolve(data);
                };

                req.onerror = () => {
                    self.table.loading = false;
                    reject();
                }
                req.send();
            });
        },
        edit(row) {
            // confirm("是否确认");
            // this.$router.push({ name: '/settings/scorecard/cardItem/list', params: { todo: "todo" }})
        },
        remove(row) {
            alert(`Remove: ${row.first_name} ${row.last_name}`);
        }
    }
};
</script>
